<template>

   <el-tree-select
    v-model="unitSelected"
    :data="unitData"
    check-strictly
    :render-after-expand="false"
    @node-click="nodeSelect"
  />
  <el-divider />

  </template>

<script setup lang="ts">
import { ElTree, ElMessage } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { ref, watch, onMounted, nextTick } from 'vue'
import { loadAllUnit } from '@/api/system/unit/UnitManager'
import { getUserInfo } from '@/api/system/user/UserManager'

const emit = defineEmits(['close-dialog', 'commit-selected', 'getSelectUnit'])
const unitData = ref([])
const unitSelected = ref()
let rootId = ''
const props = defineProps({
  fid: String
})

const filterNode = (value:any, data:any) => {
  if (!value) return true
  return data.label.includes(value)
}

const defaultProps = {
  children: 'children',
  label: 'label',
  // disabled: 'disabled',
  isLeaf: 'leaf'
}

const nodeSelect = (node) => {
  emit('getSelectUnit', node.value)
}

onMounted(() => {
  rootId = ''
  getUserInfo().then((data) => {
    rootId = data.currentUnit
  })
  loadAllUnit().then((data) => {
    unitData.value = data
    unitSelected.value = rootId
    emit('getSelectUnit', rootId)
  })
})

</script>
<style lang="scss">

  .el-dialog__body{
    padding: 10px 20px;
  }

  .code-select{
    width: 100%;

    .el-tree,ul {
      height: 360px;
      overflow-y: auto;
    }

    .el-col{
      border: 1px solid #f3f2f2;
    }

    p{
      display: inline-block;
      padding: 3px 10px;
      margin: 0;
    }

    .clear{
      float: right;
      color: #1a66b1;
      cursor:pointer;
    }

    li{
        padding: 3px;
      }

    li p {
      padding: 0;
      width: calc(100% - 100px);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .el-button{
      margin: 5px;
    }
  }

  </style>
